<template>
	<view class="content">
		<view class="">
			<image style="background-color: #eeeeee; width: 100%; height: 400rpx;" :mode="imgMode" :src="imgSrc" @error="imageError"></image>
		</view>
		<form @submit="formSubmit" class="reservationForm">
			<view class="item">
				<text>姓名</text><input type="text" name="name" :value="reservation.name" @input="nameInput" placeholder="请输入您的姓名"   />
			</view>
			<view class="item">
				<text>身份证</text><input type="text" name="identityCard" :value="reservation.identityCard" @input="identityCardInput" placeholder="请输入您的身份证号码" />
			</view>
			<view class="item">
				<text>+86</text><input type="text" name="mobile" :value="reservation.mobile" @input="mobileInput" placeholder="请输入您的手机号码" />
			</view>
			<view class="item-button">
				<button form-type="submit" type="primary" :disabled="btnDisabled">预约登记</button>
			</view>	
			<view class="">
				<view class="">
					<label><checkbox name="isPromice" value="reservation.isPromice" :checked="reservation.isPromice"  />用户健康承诺</label>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnDisabled:true,
				imgSrc:"/static/img/reservation-1.jpg",
				imgMode:"scaleToFill",
				reservation:{
				  "name": "",
				  "identityCard": "",
				  "mobile": "",				  
				  "whichLibrary": "集美图书馆",
				  "whenTime": "2020-04-12",
				  "isPromice":true
				}
			}
		},
		methods: {
			imageError: function(e) {
			     console.error('image发生error事件，携带值为' + e.detail.errMsg)
			},
			nameInput(e){
				this.reservation.name=e.detail.value;
				this.checkFrom();
			},
			identityCardInput(e){
				this.reservation.identityCard=e.detail.value;
				this.checkFrom();
			},
			mobileInput(e){
				this.reservation.mobile=e.detail.value;
				this.checkFrom();
			},
			checkFrom(){
				if(this.reservation.name==""|this.reservation.identityCard==""|this.reservation.mobile=="")
				{
					this.btnDisabled=true;
				}else{
					this.btnDisabled=false;
				}
				
			},
			formSubmit:function(e){
				this.btnDisabled=true;
				//console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				console.log('携带数据为：' + JSON.stringify(this.reservation))
				
				var formdata = e.detail.value
				uni.request({
					url: this.$apiServer+'api/services/app/Reservation/Create',
					method: 'POST',
					data: this.reservation,
					success: res => {
						if(res.data.success){
							uni.redirectTo({
								url:"reservationResult"
							})	
						}else{
							uni.showModal({
								content: '请求错误',
								showCancel: false
							});
						}										
					},
					fail: () => {},
					complete: () => {}
				});
				
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(res.data),
				// 	showCancel: false,
				// 	success() {								
				// 	}
				// });
			
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formdata),
				// 	showCancel: false
				// });
			}
		}
	}
</script>

<style lang="scss">
	.reservationForm{
		padding: 15rpx;
		.item{
			display: flex;
			height: 80rpx;
			font-size: 18px;
			border-bottom: 1px solid #C8C7CC;
			align-items: center;
			text{
				width: 150rpx;
			}
			input{
				
			}
		}
		.item-button{
			margin-top: 60rpx;
			margin-bottom: 60rpx;
		}
	}
	
</style>
